<template>
  <div id="publish-buy">
    <!-- 导航栏 -->
    <van-nav-bar @click-left="back" class="navbar">
      <template #left>
        <van-icon name="arrow-left" size="18" color="#f7f8fa" />
      </template>
      <template #title>
        <div name="arrow-left" class="title">发布购买</div>
      </template>
    </van-nav-bar>

    <!-- 今日价格 -->
    <!--<van-cell-group style="margin-top: 10px">-->
      <!--<van-cell title="今日价格" label="￥1.5" class="present-price" />-->
    <!--</van-cell-group>-->

    <!-- 表单信息 -->
    <van-form @submit="onSubmit" style="margin-top: 10px">
      <van-field v-model="num" type="digit" label="数量" placeholder="请输入数量" />
      <van-field v-model="price" type="number" label="单价（CNY）" placeholder="单价限制在0.07~0.28之间" :formatter="formatter" />
      <van-field v-model="total" label="总价（CNY）" placeholder="￥0" readonly />
      <van-field v-model="payPassword" type="password" label="密码" placeholder="请输入交易密码" />
    </van-form>

    <!-- 提交按钮 -->
    <van-tabbar v-model="active" active-color="#545c80">
      <van-tabbar-item icon="circle" @click="onSubmit">提交</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
  import store from '@/store'
  import axios from 'axios'
  import Vue from 'vue';
  import { Toast } from 'vant';

  Vue.use(Toast);

  export default {
    name: "PublishBuy",
    data() {
      return {
        total: '',
        price: '',
        num: '',
        payPassword: '',
        active: 0,
        pattern: /^\d*(\.\d{0,2})?$/,
        user: JSON.parse(sessionStorage.getItem('user')),
      };
    },
    methods: {
      back() {
        this.$router.back(-1);
      },
      onSubmit() { // 提交订单
        if (0.07 < +this.price && +this.price > 0.28) {
          Toast({
            message: '单价必须在0.07~0.28之间',
            position: 'bottom',
          });
          return;
        }

        if (this.num == '') {
          Toast({
            message: '请输入交易数量',
            position: 'bottom',
          });
          return;
        }

        if (this.price == '') {
          Toast({
            message: '请输入单价',
            position: 'bottom',
          });
          return;
        }

        if (this.payPassword == '') {
          Toast({
            message: '请输入交易密码',
            position: 'bottom',
          });
          return;
        }

        axios.get(store.state.api + '/market/addOrder', {
          params: {
            uid: this.user.uid,
            num: this.num,
            unitPrice: this.price,
            totalPrice: this.total,
            payPassword: this.payPassword,
          }
        }).then(res => {
          if (res.data.code == '200') {
            Toast({
              message: '发布成功',
              position: 'bottom',
            });
            this.num = '';
            this.price = '';
            this.total = '';

            // 回退
            this.back();
          } else {
            Toast({
              message: res.data.msg,
              position: 'bottom',
            });
          }
        }).catch(error => {
          Toast({
            message: '系统繁忙',
            position: 'bottom',
          });
        });
      },
      formatter(val) {
        // 输入的数字小数点后超过2位时，只保留2位
        if (!this.pattern.test(val)) {
          return this.price;
        }

        return val;
      },
    },
    watch: {
      price: function (val, oldVal) {
        if (val === '' || this.num === '') {
          return;
        }
        this.total = (val * this.num).toFixed(2);
      },
      num: function (val, oldVal) {
        if (val === '' || this.price === '') {
          return;
        }
        this.total = (val * this.price).toFixed(2);
      },
    },
  }
</script>

<style scoped>
  .navbar {
    background-color: #545c80;
  }
  .title {
    color: #f7f8fa;
    font-size: 14px;
  }
  .present-price {
    text-align: center
  }
</style>
